<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<h2>align-content:flex-start</h2>
<ul id="box" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
	<li>f</li>
</ul>

	<style>
		.box{
			display:-webkit-flex;
			display:flex;
			-webkit-flex-wrap:wrap;
			flex-direction:wrap;
			width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none; list-style-type:none; background-color:#eee;}
	.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
	#box{
		-webkit-align-content:flex-start;
		align-content:flex-start;
	}
	#box2{
		-webkit-align-content:flex-end;
		align-content:flex-end;
	}
	#box3{
		-webkit-align-content:center;
		align-content:center;
	}
	#box4{
		-webkit-align-content:space-between;
		align-content:space-between;
	}
	#box5{
		-webkit-align-content:space-around;
		align-content:space-around;
	}
	#box6{
		-webkit-align-content:strecth;
		align-content:strecth;
	}
	</style>

</body>
</html>
